<!-- <template>
  <div class="dashboard-container">

    <div style="height: 800px;width: 1920px;">
        <div style="height: 100%;width: 500px;margin: 0 auto;">
            <div style="height: 400px; width: 100%;margin: 0 auto;text-align: center;">
              <h1>请使用普通话发出指令</h1>
            </div>
              <div style="width: 500px; height: 100px; margin: auto;" >
                <h2>识别内容：</h2>
                <el-input style="width: 100%;"  placeholder="请输入语音"></el-input>
              </div>
              <div style="width: 100px; height: 100px; border: 1px solid; border-radius: 50px;margin:30px auto;" class="voido">

              </div>
              <el-button icon="el-icon-mic" @mousedown.native="onSpeak" @mouseup.native="sendSpeak" circle></el-button>
              <div style="width: 500px; height: 30px; margin: auto;text-align: center;">
                <h2>点击麦克风说出你想下达的指令</h2>
              </div>
        </div>
    </div>
   

  </div>
</template>

<script>



export default {


  data() {
    return {
    
    }
  },
  created() { //渲染之前执行
      this.initRecorder()
    },
  computed: {

  },
  methods:{
    autoVodio(){
      const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
        const recognition = new SpeechRecognition();
        recognition.lang = 'zh-CN';
        recognition.onresult = function(event) {
            const transcript = event.results[0][0].transcript;
            const output = document.getElementById('output');
            output.textContent = transcript;
        };
        document.getElementById('start-button').addEventListener('click', function() {
            recognition.start();
        });
    },
      initRecorder() {
      // 服务器需要https协议或者设置一下浏览器
      if(typeof(navigator.mediaDevices.getUserMedia)=="undefined") {
        this.$message.error('当前没有语音权限！')
        return
      }
      if (navigator.mediaDevices.getUserMedia) { const constraints = { audio: true }; navigator.mediaDevices.getUserMedia(constraints).then(() => { console.log("授权成功！"); }, () => { console.error("授权失败！"); } ); } else { console.error("浏览器不支持 getUserMedia"); }
      this.recorder = new Recorder({
        sampleBits: 16, // 采样位数，支持 8 或 16，默认是16
        sampleRate: 16000, // 采样率，支持 11025、16000、22050、24000、44100、48000，根据浏览器默认值，我的chrome是48000
        numChannels: 1, // 声道，支持 1 或 2， 默认是1
      });
      },

      // 录音喊话
onSpeak() {
 this.recorder.start().then(function() {
  this.$message('speaking...')
 });
},
sendSpeak() {
 // 结束录音
 this.recorder.stop();
 // 录音播放
 this.recorder.play();
 // 获取 WAV 数据(Blob)
 // let blob = this.recorder.getWAVBlob();
 // 将WAV转化，获取 MP3 数据(Blob)，函数wavToMp3、blobToBase64见下两个代码块
 const mp3Blob = wavToMp3(this.recorder.getWAV(),this.recorder.getChannelData());
 this.blobToBase64(mp3Blob).then(stream => {
  console.log('语音打印', stream)
  // 下面发送数据
 })
},


  }
}
</script>

<style lang="scss" scoped>
  .voido{
    background-image: url("../../../assets/300.jpg") ;

   background-size: 100%,100%;
  }
</style> -->



<template>
  <div class="dashboard-container">
    <div style="height: 800px;width: 1920px;">
        <div style="height: 100%;width: 500px;margin: 0 auto;">
            <div style="height: 400px; width: 100%;margin: 0 auto;text-align: center;">
              <h1>请使用普通话发出指令</h1>
            </div>
              <div style="width: 500px; height: 100px; margin: auto;" >
                <h2>识别内容：</h2>
                <div >
                    {{ this.dataVoice }}
                </div>
              </div>
              <!-- <div style="width: 100px; height: 100px; border: 1px solid; border-radius: 50px;margin:30px auto;" class="voido"  @click="startRecordAudio">
                  
              </div> -->
              <h3>录音时长：{{ recorder.duration.toFixed(2) }}</h3>
              <el-row>
                <el-button type="primary" @click="startRecordAudio">开始录音</el-button>
                <el-button type="danger" @click="stopRecordAudio">停止录音</el-button>
                <el-button type="success" @click="playRecordAudio">播放录音</el-button>
                <el-button type="success" @click="uploadWavData">识别录音</el-button>
                <!-- <el-button type="button" @click="downloadWAVRecordAudioData">下载WAV录音文件</el-button> -->
              </el-row>
              <div style="width: 500px; height: 30px; margin: auto;">
                <ul>1、点击开始录音</ul>
                  <ul>2、录制完成点击停止录音</ul>
                  <ul>3、播放录音检查声音完整性</ul>
                  <ul>4、识别语音内容</ul>
              
              </div>
        </div>
    </div>
   

    <!-- <el-row>
      <el-button type="button" @click="getPCBRecordAudioData">获取PCB录音数据</el-button>
      <el-button type="button" @click="downloadPCBRecordAudioData">下载PCB录音文件</el-button>
      <el-button type="button" @click="getWAVRecordAudioData">获取WAV录音数据</el-button>
      <el-button type="button" @click="downloadWAVRecordAudioData">下载WAV录音文件</el-button>
      <el-button type="button" @click="uploadWAVData">上传WAV录音数据</el-button>
    </el-row> -->
  </div>
    

</template>

<script>
import Recorder from "js-audio-recorder";
// import { uploadWavData } from "@/api/system/audioRecorder";
import api from "@/api/voice/voice"
export default {
  name: "audioRecorder",
  data() {
    return {
      dataVoice:"",
      recorder: new Recorder({
        sampleBits: 16, // 采样位数，支持 8 或 16，默认是16
        sampleRate: 16000, // 采样率，支持 11025、16000、22050、24000、44100、48000，根据浏览器默认值，我的chrome是48000
        numChannels: 1, // 声道，支持 1 或 2， 默认是1
        // compiling: false,(0.x版本中生效,1.x增加中)  // 是否边录边转换，默认是false
      }),
    };
  },
  mounted() {
  },
  methods: {
    //开始录音
    startRecordAudio() {
      Recorder.getPermission().then(
          () => {
            console.log("开始录音");
            this.recorder.start(); // 开始录音
          },
          (error) => {
            this.$message({
              message: "请先允许该网页使用麦克风",
              type: "info",
            });
            console.log(`${error.name} : ${error.message}`);
          }
      );
    },
    //停止录音
    stopRecordAudio() {
      console.log("停止录音");
      this.recorder.stop();
    },
    //播放录音
    playRecordAudio() {
      console.log("播放录音");
      this.recorder.play();
    },
    //获取PCB录音数据
    getPCBRecordAudioData() {
      var pcmBlob = this.recorder.getPCMBlob();
      console.log(pcmBlob);
    },
    //获取WAV录音数据
    getWAVRecordAudioData() {
      var wavBlob = this.recorder.getWAVBlob();
      console.log(wavBlob);
    },
    //下载PCB录音文件
    downloadPCBRecordAudioData() {
      this.recorder.downloadPCM("badao");
    },
    //下载WAV录音文件
    downloadWAVRecordAudioData() {
      this.recorder.downloadWAV("badao");
    },
    //上传wav录音数据
    uploadWavData() {
      var wavBlob = this.recorder.getWAVBlob();
      // 创建一个formData对象
      var formData = new FormData()
      // 此处获取到blob对象后需要设置fileName满足当前项目上传需求，其它项目可直接传把blob作为file塞入formData
      const newbolb = new Blob([wavBlob], { type: 'audio/wav' })
      //获取当时时间戳作为文件名
      const fileOfBlob = new File([newbolb], new Date().getTime() + '.wav')
      formData.append('file', fileOfBlob)
      api.uploadWavData(formData).then((response) => {
        console.log(response);
        this.dataVoice= response.data
      });
     
    },
  },
  watch: {},
};
</script>

<style scoped>
  .el-row{
    margin: 10px;
  }
</style>
